<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YAML | Example &quot;menu_vertical_listnav&quot;</title>
<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_vertical_listnav.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_vertical_listnav.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- embedded styles for dynamic layout options -->
<style type="text/css">
  #js-info { display:block; padding: 10px 20px; background: #fee; color: #800; margin: 0 0 10px 0; }
  .js #js-info { display:none; }
</style>

<!-- JavaScript Detection -->
<script type="text/javascript">document.documentElement.className += " js";</script>
<!-- jQuery & Plugins -->
<script src="/js/lib/jquery-1.4.2.js" type="text/javascript"></script>
<script src="/yaml/add-ons/accessible-tabs/jquery.tabs.js" type="text/javascript"></script>
<script src="/yaml/add-ons/syncheight/jquery.syncheight.js" type="text/javascript"></script>

<style>
.jquery_tabs {
	display: block;
}
.jquery_tabs ul.tabs-list{
	width:220px;
}
.jquery_tabs ul.tabs-list li{
	display: inline;
	white-space:nowrap;
}
.jquery_tabs ul.tabs-list li a{
	color: #747D84;
	border-left-width:0px;
	font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, sans-serif;
	text-shadow: white 0px 1px 0px;
	width:72px;
	padding-left:0;
	padding-right:0;
	text-align:center;
	background-color:#EDF3FA;
	background-image: -moz-linear-gradient(top, #EDF3FA,#D0D9E4);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EDF3FA), to(#D0D9E4));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#EDF3FA',EndColorStr='#D0D9E4');
}
.jquery_tabs ul.tabs-list li a:hover{
	background-color:#D0D9E4;
	background-image: -moz-linear-gradient(top, white,#D0D9E4);
	background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), to(#D0D9E4));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF',EndColorStr='#D0D9E4');

}
.jquery_tabs ul.tabs-list li.current a,
.jquery_tabs ul.tabs-list li.current a:focus,
.jquery_tabs ul.tabs-list li.current a:hover, 
.jquery_tabs ul.tabs-list li.current a:active{
	background-color:#D0D9E4;
	background-image: -moz-linear-gradient(top, white,#D0D9E4);
	background-image: -webkit-gradient(linear, 0% 0, 0% 100%, from(white), to(#D0D9E4));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF',EndColorStr='#D0D9E4');
}

.jquery_tabs ul.tabs-list li a.first{
border-left-width:1px;
}

.jquery_tabs .content{
background-color:#D0D9E4;
padding:0;
}
.jquery_tabs .content h3{
display:none;
}

.jquery_tabs ul.tabs-list li{
margin-right:0px;
}

.tab-content .filter{
	border-bottom: 1px solid #B4BBC4;
	height: 20px;
	padding: 10px;
	position: relative;
	width: 198px;
	overflow:hidden;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E3EAF2',EndColorStr='#D0D9E4');
	background-image: -moz-linear-gradient(top, #D0D9E4,#E3EAF2);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, to(#E3EAF2), from(#D0D9E4));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#D0D9E4',EndColorStr='#E3EAF2');
	
}
.tab-content .filter input{
	-webkit-background-clip: padding-box;
	-webkit-box-shadow: #E2E9F1 0px 1px 0px, #E7E7E7 0px 1px 0px inset;
	background: white url(data:image/png;charset=utf-8;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA7VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wUmlnaHRzPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvcmlnaHRzLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcFJpZ2h0czpNYXJrZWQ9IkZhbHNlIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6QzNERUIxREMyRDIwNjgxMTkyQjBGQjNGQUY5RUVENjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MTZGRkM2RkQzMTkzMTFFMEE5OURGQzgwOEE3QTM2NzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MTZGRkM2RkMzMTkzMTFFMEE5OURGQzgwOEE3QTM2NzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzlBNTMwMDM2MjA2ODExOERCQkM3RkY1QzdCQzQ0QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDM0RFQjFEQzJEMjA2ODExOTJCMEZCM0ZBRjlFRUQ2OSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PovYeTsAAADeSURBVHjaYjxz5gwDFCQDcSwQ6wLxTSBeA8QTgfgvAxJggdLrgDgQSdwSikFizkD8CybBBMRpUInXQBwKxMJA7AnE94HYBojrkG0AaciEsnOhzngHxDuAOAIqnomuQRrKPsKACk4B8XcgFgJiTmQNT6FsAzQNWlCFr6Ea4RqWQdkzgdgJyjYG4hVQ9mJkUxiBwcoGpHcBsT0DdvAIiG2hNNiGX9CgqwTiy1BFL4B4OtQpckB8GIgVYTYw4AEgJ26B+gXkV1smBvxgHxD7QG0ChWYvIQ3Img4CcSJAgAEA1lUu87/vmVIAAAAASUVORK5CYII=) no-repeat 6px 3px padding-box;
	background-clip: padding-box;
	border: 1px solid;
	border-bottom-left-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
	border-top-left-radius: 20px 20px;
	border-top-right-radius: 20px 20px;
	height: 18px;
	padding: 0px 7px 0px 20px;
	border-bottom-color: #A2A9B0;
	border-left-color: #A2A9B0;
	border-right-color: #A2A9B0;
	border-top-color: #8F969C;
	width: 160px;
	
}
input:focus, select:focus, textarea:focus {
outline: 0px;
}

h1 span#jade-title{
color:#318940;
font-family: 'Lucida Grande','Lucida Sans Unicode',Arial,Helvetica,sans-serif;
text-shadow:0 0 2px #6CAD29, 
	0 -1px 2px #00897A, 
	0px -1px 1px #6CAD29; 
	text-shadow: 1px 1px #40730e;
	text-shadow: 1px 1px 3px #148F24; 
	color:#92bf30;
}
#header{
    background: none repeat scroll 0 0 #EBEBEB;

}
/*input:focus, select:focus, textarea:focus {
border:1px solid #E3EAF2 !important;
margin:0 !important;
outline-color:-moz-use-text-color !important;
outline-style:none !important;
outline-width:0 !important;
}*/

</style>


<script type="text/javascript">

$(document).ready(function(){
	$(".example3").accessibleTabs({fx:"show",fxspeed: '', syncheights: true, tabbody:'.tab-content',listCustomClass:'compact'});
});

</script>

</head>

<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#col3">Skip to main content (Press Enter).</a></li>
</ul>

<div class="page_margins">
  <div class="page">
    <div id="header" role="banner">
      <div id="topnav" role="contentinfo">
        <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
      </div>
      <h1><span id="jade-title">Jade Soft</span></h1>
      <span>YAML &#8226; (X)HTML/CSS Framework</span>
    </div>
    <!-- begin: main navigation #nav -->
    <div id="nav" role="navigation">
      <div class="hlist">
        <ul>
          <li><a href="../index.html">Table Of Contents</a></li>
          <li><a href="../06_layouts_advanced/2col_advanced.html">Next Example</a></li>
          <li><a href="menu_sliding_door.html">Previous Example</a></li>
        </ul>
      </div>
    </div>
    <!-- end: main navigation -->
    <!-- begin: main content area #main -->
    <div id="main">
      <!-- begin: #col1 - first float column -->
      <div id="col1" role="complementary">
        <div id="col1_content" class="clearfix">
          <h6 class="vlist">Styled Navigation Title [H6]</h6>
          <ul class="vlist">
            <li><a href="#">Level 1, Item 1</a></li>
            <li><a href="#">Level 1, Item 2 </a>
            <li><a href="#">Level 1, Item 3 </a></li>
            <li><a href="#">Level 1, Item 4 </a></li>
          </ul>
          <div class="jquery_tabs example3">
	       <h3>联系人</h3>
	       <div class="tab-content">
	       	 <div class="filter tags">
				<input type="text" placeholder="搜索联系人…"/>
				<a class="clear-search" title="clear search"><ins></ins></a>
			</div>
	       	<h4>Lorem ipsum ... </h4>
	       	<p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
	       	<h4>Lorem ipsum ... </h4>
	       	<p>Nullam malesuada suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
	       </div>
	       <h3>提醒</h3>
	       <div class="tab-content">
	         <div class="filter tags">
				<input type="text" placeholder="搜索提醒…"/>
				<a class="clear-search" title="clear search"><ins></ins></a>
			 </div>
	         <h4>Lorem ipsum ... </h4>
	         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. </p>
	         <h4>Lorem ipsum ... </h4>
	         <p>Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
	       </div>
	       <h3>事件</h3>
	       <div class="tab-content">
	         <div class="filter tags">
				<input type="text" placeholder="搜索事件…"/>
				<a class="clear-search" title="clear search"><ins></ins></a>
			 </div>
	         <p>Your content could be here.</p>
	       </div>
	     </div>
        </div>
      </div>
      <!-- end: #col1 -->
      <!-- begin: #col2 second float column -->
      <div id="col2" role="complementary">
        <div id="col2_content" class="clearfix">
          <h2>Column  #col2</h2>
          <p>Integer condimentum, justo a venenatis vulputate, enim pede porttitor eros, non   pretium lorem orci id tortor. Nulla a ligula. Mauris nulla arcu, luctus vel,   consequat non, luctus eu, nisi. Mauris volutpat, nunc eget pretium blandit,   ligula quam commodo nisl, ac fermentum nibh pede et nulla. In condimentum   bibendum nisi. Vestibulum risus. </p>
          <p>Nullam placerat varius nibh. Quisque tellus   sapien, placerat sed, aliquam sit amet, scelerisque sit amet, nisi. Pellentesque   eget leo vitae felis laoreet dictum. Duis pellentesque porttitor sapien. Fusce   leo. Nulla leo. Donec mattis, justo nec gravida euismod, massa mi posuere   mauris.</p>
        </div>
      </div>
      <!-- end: #col2 -->
      <!-- begin: #col3 static column -->
      <div id="col3" role="main">
        <div id="col3_content" class="clearfix">
          <h2>Column  #col3</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus.</p>
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. Integer   congue nisl in mauris. Ut risus diam, ornare eget, interdum id, tincidunt at,   eros.</p>
          </blockquote>
          <p>Nulla vitae mauris. Phasellus vel ligula quis dolor bibendum egestas. Duis a   massa ut orci varius placerat. Sed leo nulla, tempor nec, commodo in, fringilla   vel, nibh. Cras nibh. Pellentesque venenatis felis. Cum sociis natoque penatibus   et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla   gravida nunc. Mauris neque. Cras gravida metus eget sapien. Sed faucibus, turpis   ut pretium hendrerit, turpis mauris scelerisque tellus, vel convallis metus   massa in neque.</p>
        </div>
        <!-- IE column clearing -->
        <div id="ie_clearing">&nbsp;</div>
      </div>
      <!-- end: #col3 -->
    </div>
    <!-- end: #main -->
    <!-- begin: #footer -->
    <div id="footer" role="contentinfo">Footer with copyright notice and status information<br />
Layout based on <a href="http://www.yaml.de/">YAML</a></div>
    <!-- end: #footer -->
  </div>
</div>
<!-- full skiplink functionality in webkit browsers -->
<script src="../../yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
</body>
</html>
